<template>
  <div class="filter">
    <t-dialog
      width="1166px"
      :footer="false"
      placement="center"
      :visible.sync="visible"
      :close-on-overlay-click="false"
    >
      <template #header>
        <div class="drawer-head" @click="close">
          <!--<p class="chevron-left">-->
          <!--  <icon-font name="chevron-left" size="18px"/>-->
          <!--</p>-->
          <h3>{{ header }}</h3>
        </div>
      </template>
      <template #footer>
        <!--<div class="footer-btns">-->
        <!--  <t-button :theme="confirmBtn.theme" :loading="confirmBtn.loading" class="confirm-btn flex-1" @click="handleConfirm">{{confirmBtn.text}}</t-button>-->
        <!--  <t-button theme="default" class="cancel-btn" @click="close">取消</t-button>-->
        <!--</div>-->
      </template>
      <div>
        <div class="base-info">
          <div class="flex align-center">
            <p class="label-title">仓库名称</p>
            <p>{{ info.warehouse_name }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">订单类型</p>
            <p>{{ orderType[info.order_type] }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">订单日期</p>
            <p>{{ info.order_date }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">订单单号</p>
            <p>{{ info.order_no }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">总优惠金额</p>
            <p>{{ info.discount_amount ? info.discount_amount : '￥0.00' }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">联系人</p>
            <p>{{ info.linkman ? info.linkman : '无' }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">联系电话</p>
            <p>{{ info.phone ? info.phone : '无' }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">经办人</p>
            <p>{{ info.operator_name ? info.operator_name : '无' }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">批次编号</p>
            <p>{{ info.batch_no ? info.batch_no : '无' }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">备注</p>
            <p>{{ info.remark ? info.remark : '无' }}</p>
          </div>
        </div>
        <div class="pt24">
          <p class="label-title pb16">产品清单</p>
          <t-table
            rowKey="id"
            :data="product_data"
            :columns="columns"
            :stripe="stripe"
            :bordered="bordered"
            :hover="hover"
            :size="size"
            :max-height="maxHeight"
            :table-layout="tableLayout ? 'auto' : 'fixed'"
            :showHeader="showHeader"
            cellEmptyContent="-"
            resizable
            :loading="loading"
          >
            <template #title-slot-option></template>
            <template #thumb="{row}">
              <t-image-viewer :images="[row.thumb]" :closeOnEscKeydown="false">
                <template #trigger="{ open }">
                  <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                    <p class="prod-img">
                      <img alt="test" :src="row.thumb"/>
                    </p>
                    <div class="tdesign-demo-image-viewer__ui-image--hover">
                      <span><browse-icon size="1.4em"/> </span>
                    </div>
                  </div>
                </template>
              </t-image-viewer>
            </template>
            <template #unit_price="{row}">
              <p>￥{{ row.unit_price ? row.unit_price : '0.00' }}</p>
            </template>
          </t-table>
        </div>
      </div>
    </t-dialog>
  </div>
</template>

<script lang="jsx">
import UploadImg from "@/components/upload-img/index.vue";
import { IconFont } from "tdesign-icons-vue";
import MapContainer from "@/components/MapContainer/index.vue";
import {warehouseCreateApi, warehouseDetailApi, warehouseEditApi} from "@/api/warehouse";
import {warehouse_orderDetailApi} from "@/api/InOutStorage";

export default {
  name: 'OrderInfo',
  components: {UploadImg, IconFont, MapContainer},
  data() {
    return {
      visible: false,
      header: '订单详情',
      info: {},
      editId: '',
      orderType: {
        0: '入库',
        1: '出库',
        2: '调拨',
        3: '盘点'
      },

      product_data: [],
      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns: [
        {colKey: 'thumb', title: '图片', align: 'center', width: 60,},
        {colKey: 'title', title: '产品名称', width: 240, ellipsis: true},
        {colKey: 'unit_price', title: '进货价', width: 120},
        {colKey: 'remark', title: '备注', width: 140},
        //{colKey: 'status', title: '状态', width: 140},
        {colKey: 'option', title: 'title-slot-option', fixed: 'right', width: 80},
      ],
      maxHeight: 360,
      loading: false,
    }
  },
  methods: {
    getDetail() {
      warehouse_orderDetailApi(this.editId).then(res=> {
        console.log('res', res)
        this.info = res.data
        this.product_data = res.data.product.map(item=> ({
          thumb: item.product_thumb,
          title: item.product_title,
          product_id: item.product_id, // 产品ID
          unit_id: item.unit_id,  // 单位ID
          quantity: item.quantity, // 数量两位小数
          is_sn: item.is_sn, // 开启SN序列号（0关闭；1开启）
          sn_data: item.sn_data.split(',').map((el, index)=> ({index, sn: el})), // SN数据
          unit_price: item.unit_price, // 含税单价（进货价）
          remark: item.remark, // 备注（50个字内）
        }))
      }).catch(err=> {
        console.log('err', err)
      })
    },
    open(id) {
      this.editId = id
      this.product_data = []
      this.info = {}
      this.getDetail()
      this.visible = true
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
.base-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;

  p {
    padding: 12px 0;
    display: flex;
    color: var(--td-text-color-primary);
  }

  .label-title {
    width: 200px;
    font: var(--td-font-body-medium);
    color: var(--td-text-color-secondary);
    font-weight: 400;
    text-align: left;
    flex-shrink: 0;
  }
}

.footer-btns {
  display: flex;

  .confirm-btn {
    height: 42px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    border-radius: var(--td-radius-medium);
  }

  .cancel-btn {
    width: 132px;
    height: 42px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    background-color: #B8B8B8;
  }
}
</style>
